<template>
  <dv-full-screen-container>
    <div class="wrapper">
      <div class="top_box">
        <div class="top_item left">
          <div class="content">
            <div class="decoration_left">
              <dv-decoration-3 />
            </div>
            <p>{{ currentTime }}</p>
          </div>
        </div>
        <div class="top_item md">
          <p>设备中央监控平台</p>
        </div>
        <div class="top_item right">
          <div class="content">
            <p>{{ currentTime }}</p>
            <div class="decoration_right">
              <dv-decoration-3 />
            </div>
          </div>
        </div>
      </div>
      <div class="content_box">
        <div class="left_box">
          <dv-border-box-8>
            <div class="choose_device">
              <div class="title_tool">
                <p class="title">设备列表</p>
                <p class="btn">
                  <span @click="chooseAllDevice">全选</span>
                  <span @click="clearAllDevice">取消</span>
                </p>
              </div>
              <dv-decoration-2 style="width:100%;height:2px;position: relative;top: -2px" />
              <div class="device_list">
                <ul>
                  <li v-for="(item, index) in deviceList" @click="chooseDevice(item)">
                    <span :class="{ circle: true, checked: deviceCheckedList.includes(item.devTypeCode) }"></span>
                    <div class="device_content">
                      <dv-border-box-12
                        :color="item.errNum ? ['rgba(255, 55, 95, .5)', 'rgba(255, 55, 95, 1)'] : ['rgba(0, 190, 255, .5)', 'rgba(0, 190, 255, 1)']">
                        <div :class="{ 'device_item': true, 'device_err': item.errNum }">
                          <div class="device_img">
                            <img src="../assets/images/zzjh.png">
                          </div>
                          <div class="device_info">
                            <p class="name">{{ item.devTypeName }}</p>
                            <p class="num">
                              <span>正常设备：</span>
                              <span style="color: #24FEFF">{{ item.sucNum }}</span>
                            </p>
                            <p class="num">
                              <span>报警设备：</span>
                              <span style="color: #FF375F">{{ item.errNum }}</span>
                            </p>
                          </div>
                        </div>
                      </dv-border-box-12>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="choose_addr">
              <div class="title_tool">
                <p class="title">位置列表</p>
                <p class="btn">
                  <span @click="chooseAllAddr">全选</span>
                  <span @click="clearAllAddr">取消</span>
                </p>
                <dv-decoration-2 style="width:100%;height:2px;position: relative;top: -2px" />
              </div>
              <div class="addr_list">
                <ul class="first">
                  <li v-for="(item, index) in addressList">
                    <p class="first_info">
                      <span :class="{ circle: true, checked: addressCheckedList.includes(item.addrCode) }"
                        @click="chooseAddr(item)"></span>
                      <span class="first_name">{{ item.addrName }}</span>
                      <span :class="{ arrow: true, down: !item.up, up: item.up }" @click="arrowHandle(item)"></span>
                    </p>
                    <template v-if="item.childAddress && item.childAddress.length && item.up">
                      <div class="second">
                        <ul class="second_content">
                          <li class="second_info" v-for="(child, childIndex) in item.childAddress">
                            <span :class="{ circle: true, checked: addressCheckedList.includes(child.addrCode) }"
                              @click="chooseAddr(child)"></span>
                            <span class="second_name">{{ child.addrName }}</span>
                          </li>
                        </ul>
                      </div>
                    </template>
                  </li>
                </ul>
              </div>
            </div>
          </dv-border-box-8>
        </div>
        <div class="right_box">
          <ul class="device_status_list">
            <li class="device_box" v-for="item in tableData" :key="item.devCode">
              <div class="device_top">
                <p>{{ item.devCode }}-{{ item.devName }}</p>
              </div>
              <div class="device_info">
                <div class="decoration">
                  <dv-decoration-2 />
                </div>
                <div class="device_status">
                  <div class="left">
                    <div class="device_img">
                      <img src="../assets/images/zzjh.png" alt="">
                    </div>
                    <ul class="pack_list">
                      <li class="pack_item">
                        <div class="pack_name">
                          <template v-if="resTime - new Date(item.heartTime) > 30000">
                            <i class="point pointFlicker danger"></i>
                          </template>
                          <template v-else>
                                <i :class="{
                                point: true,
                                pointFlicker: true,
                                danger: item.devStatus === '0',
                                success: item.devStatus === '1',
                                primary: item.devStatus === '2',
                                warning: item.devStatus === '3',
                                gary: item.devStatus === '4'
                              }"></i>
                          </template>
                          设备状态
                        </div>
                        <div class="pack_status">
                          <template v-if="resTime - new Date(item.heartTime) > 30000">
                            <span class="danger">离线</span>
                          </template>
                          <template v-else>
                            <template v-if="item.devStatus === '0'">
                              <span class="danger">离线</span>
                            </template>
                            <template v-if="item.devStatus === '1'">
                              <span class="success">正常</span>
                            </template>
                            <template v-if="item.devStatus === '2'">
                              <span class="primary">执行</span>
                            </template>
                            <template v-if="item.devStatus === '3'">
                              <span class="warning">异常</span>
                            </template>
                            <template v-if="item.devStatus === '4'">
                              <span class="gary">停用</span>
                            </template>
                          </template>
                        </div>
                      </li>
                      <template v-if="item.packStatusList && item.packStatusList.length">
                        <li class="pack_item" v-for="pack in item.packStatusList">
                          <div class="pack_name">
                            <template v-if="resTime - new Date(item.heartTime) > 30000">
                              <i class="point pointFlicker gary"></i>
                            </template>
                            <template v-else>
                              <i :class="{
              point: true,
              pointFlicker: true,
              danger: pack.status === '2',
              success: pack.status === '0',
              warning: pack.status === '1',
              gary: item.devStatus === '4' || item.devStatus === '0'
            }"></i>
                            </template>
                            {{ pack.packName }}
                          </div>
                          <div class="pack_status">
                            <template v-if="resTime - new Date(item.heartTime) > 30000">
                              <span class="gary">离线</span>
                            </template>
                            <template v-else>
                              <template v-if="pack.status === '2' || item.devStatus === '4' || item.devStatus === '0'">
                                <span class="gary">离线</span>
                              </template>
                              <template v-if="pack.status === '0'">
                                <span class="success">正常</span>
                              </template>
                              <template v-if="pack.status === '1'">
                                <span class="warning">异常</span>
                              </template>
                            </template>
                          </div>
                        </li>
                      </template>
                    </ul>
                  </div>
                  <div class="right">
                    <div class="cpu_box">
                      <ul class="cpu_list">
                        <li class="cpu_item">
                          <dv-charts :option="option" />
                          <p>CPU使用率</p>
                        </li>
                        <li class="cpu_item">
                          <dv-charts :option="option" />
                          <p>CPU使用率</p>
                        </li>
                        <li class="cpu_item">
                          <dv-charts :option="option" />
                          <p>CPU使用率</p>
                        </li>
                        <li class="cpu_item">
                          <dv-charts :option="option" />
                          <p>CPU使用率</p>
                        </li>
                      </ul>
                    </div>
                    <div class="cpu_info">
                      <ul>
                        <li class="cpu_info_item">
                          <p>
                            <i class="cpu"></i>
                            <span class="name">CPU温度:</span>
                            <span class="num">64℃</span>
                          </p>
                        </li>
                        <li class="cpu_info_item">
                          <p>
                            <i class="io"></i>
                            <span class="name">磁盘IO:</span>
                            <span class="num">64℃</span>
                          </p>
                        </li>
                        <li class="cpu_info_item">
                          <p>
                            <i class="smart"></i>
                            <span class="name">硬盘SMART:</span>
                            <span class="num">64℃</span>
                          </p>
                        </li>
                        <li class="cpu_info_item">
                          <p>
                            <i class="lj"></i>
                            <span class="name">链接数量:</span>
                            <span class="num">64℃</span>
                          </p>
                        </li>
                        <li class="cpu_info_item">
                          <p>
                            <i class="wk"></i>
                            <span class="name">网卡流量:</span>
                            <span class="num">64℃</span>
                          </p>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="device_version">
                  <p>应用版本: 【<span>{{ item.devClientVersion }}】</span></p>
                  <p>最后连线: 【<span>{{ item.heartTime }}】</span></p>
                </div>
              </div>
            </li>
          </ul>
          <div class="page_warp">
            <ul class="page" ref="page" :style="{ width: page.total * 50 + 'px' }">
              <li :class="{ page_num: true, active: page.currentPage === item }" v-for="(item, index) in page.total"
                @click="pageHandle(index)">{{ item }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<script>
import { userAddrAndType, selectAll } from '../api/api'

export default {
  name: "home",
  data() {
    return {
      currentTime: '',
      resTime: '',
      deviceCheckedList: [],
      deviceList: [],
      addressCheckedList: [],
      addressList: [],
      option: {
        series: [
          {
            type: 'gauge',
            arcLineWidth: 5,
            data: [
              { name: 'itemA', value: 65, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }
            ],
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            pointer: {
              show: false
            },
            dataItemStyle: {
              lineCap: 'round'
            },
            details: {
              show: true,
              formatter: '{value}%',
              style: {
                fill: '#1ed3e5',
                fontSize: 18
              }
            }
          }
        ]
      },
      devStatusList: [],
      tableData: [],
      page: {
        total: 20,
        currentPage: 1
      }
    }
  },
  created() {
    this.getDate()
    this.getUserAddrAndType()
  },
  methods: {
    //获取时间
    getDate() {
      this.dateHandle()
      setInterval(this.dateHandle, 1000)
    },
    dateHandle() {
      const d = new Date();
      const year = d.getFullYear();
      const month = d.getMonth() > 8 ? d.getMonth() + 1 : "0" + (d.getMonth() + 1);
      const date = d.getDate() > 9 ? d.getDate() : "0" + d.getDate();
      const hours = d.getHours() > 9 ? d.getHours() : "0" + d.getHours();
      const minutes = d.getMinutes() > 9 ? d.getMinutes() : "0" + d.getMinutes();
      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const today = new Date().getDay();
      const currentWeekDay = weekDays[today];

      this.currentTime = `${year}年${month}月${date} ${hours}:${minutes} ${currentWeekDay}`;
    },
    //获取用户的地址和设备类型
    async getUserAddrAndType() {
      await this.$store.dispatch('setToken')
      let res = await userAddrAndType()
      //获取所有地址
      this.addressList = res.data.data.addressList
      let addressArr = []
      this.addressList.forEach(item => {
        this.getAddrcode(item, addressArr)
      })
      this.addressCheckedList = addressArr
      //获取所有设备类型
      this.deviceList = res.data.data.devTypeList.map(item => {
        return {
          devTypeCode: item.devTypeCode,
          devTypeName: item.devTypeName,
          sucNum: 0,
          errNum: 0
        }
      })
      this.deviceCheckedList = this.deviceList.map(item => item.devTypeCode)
      //获取设备状态
      this.getStatus()
      //轮询
      this.timeId = setInterval(() => {
        this.getStatus()
      }, 5000)

    },
    //获取所有设备状态
    async getStatus() {
      await this.$store.dispatch('setToken')
      let res = await selectAll({
        addrCodes: this.addressCheckedList.join(','),
        devTypeCodes: this.deviceCheckedList.join(',')
      })
      this.resTime = new Date(res.headers.date).getTime()
      let monitorData = res.data.data ? res.data.data : []
      let allArr = []
      monitorData.forEach(item => {
        allArr = allArr.concat(item.devStatusList)
      })
      this.devStatusList = allArr
      //获取设备类型的 正常以及异常数量
      this.deviceList.forEach(item => {
        item.sucNum = 0
        item.errNum = 0
      })
      this.devStatusList.forEach(item => {
        let temp = this.deviceList.find(type => type.devTypeCode === item.devTypeCode)
        if (this.resTime - new Date(item.heartTime) > 30000) {
          temp.errNum += 1
        } else {
          if (item.devStatus === '1') {
            temp.sucNum += 1
          } else {
            temp.errNum += 1
          }
        }
      })
      //分页
      this.page.total = Math.ceil(this.devStatusList.length / 3)
      this.getTableData()
    },
    getTableData() {
      this.tableData = this.devStatusList.slice((this.page.currentPage - 1) * 3, this.page.currentPage * 3)
    },
    //设备类型选择
    chooseDevice(item) {
      let index = this.deviceCheckedList.indexOf(item.devTypeCode)
      if (index === -1) {
        this.deviceCheckedList.push(item.devTypeCode)
      } else {
        this.deviceCheckedList.splice(index, 1)
      }
    },
    chooseAllDevice() {
      this.deviceCheckedList = this.deviceList.map(item => item.devTypeCode)
    },
    clearAllDevice() {
      this.deviceCheckedList = []
    },
    //地点选择
    arrowHandle(row) {
      let index = this.addressList.findIndex(item => item.addrCode === row.addrCode)
      let checkItem = this.addressList[index]
      checkItem.up = !checkItem.up
      this.$set(this.addressList, index, checkItem)
    },
    chooseAddr(row) {
      let flag = this.addressCheckedList.indexOf(row.addrCode)
      let arr = []
      this.getAddrcode(row, arr)
      console.log(arr, 446)
      if (flag === -1) {
        arr.forEach(item => {
          if (!this.addressCheckedList.includes(item)) {
            this.addressCheckedList.push(item)
          }
        })
      } else {
        arr.forEach(item => {
          let index = this.addressCheckedList.indexOf(item)
          if (index > -1) {
            this.addressCheckedList.splice(index, 1)
          }
        })
      }
    },
    getAddrcode(row, arr) {
      arr.push(row.addrCode)
      if (row.childAddress && row.childAddress.length) {
        for (let item of row.childAddress) {
          this.getAddrcode(item, arr)
        }
      }
    },
    chooseAllAddr() {
      let addressArr = []
      this.addressList.forEach(item => {
        this.getAddrcode(item, addressArr)
      })
      this.addressCheckedList = addressArr
    },
    clearAllAddr() {
      this.addressCheckedList = []
    },
    //分页
    pageHandle(index) {
      this.$refs.page.style.transform = `translateX(-${(index * 50 + 25)}px)`
      this.page.currentPage = index + 1
      this.getTableData()
    }
  }
}
</script>

<style scoped lang="less">
.top_box {
  height: 8%;
  display: flex;

  .top_item:nth-child(1) {
    width: 28%;
    background-image: url("../assets/images/top_lt.png");
  }

  .top_item:nth-child(2) {
    width: 44%;
    background-image: url("../assets/images/top_md.png");
  }

  .top_item:nth-child(3) {
    width: 28%;
    background-image: url("../assets/images/top_rt.png");
  }

  .top_item {
    background-size: 100% 100%;
  }

  .left,
  .right {
    .content {
      display: flex;
      align-items: center;
      height: 80%;
    }

    p {
      width: 70%;
      font-size: 20px;
      color: #CCF8FF;
      text-align: center;
      font-family: DingTalk;
    }
  }

  .decoration_left {
    box-sizing: border-box;
    width: 30%;
    height: 30px;
    padding-left: 30px;
  }

  .decoration_right {
    box-sizing: border-box;
    width: 30%;
    height: 30px;
    padding-right: 30px;
  }

  .md {
    p {
      font-size: 40px;
      color: #5FEAFF;
      letter-spacing: 12px;
      text-align: center;
      font-family: YouSheBiaoTiHei;
      background: linear-gradient(180deg, #FFFFFF 0%, #80BBFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}

.content_box {
  height: 92%;
  display: flex;

  .left_box {
    width: 25%;
    box-sizing: border-box;
    padding: 20px;
  }

  .right_box {
    width: 75%;
  }
}

.left_box {
  .choose_device {
    height: 60%;
    background: linear-gradient(0deg, rgba(0, 69, 255, 0.2) 0%, rgba(23, 83, 246, 0) 100%);

    .device_list {
      height: calc(100% - 50px);

      ul {
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
        padding: 10px 20px;

        li {
          height: 25%;
          display: flex;
          align-items: center;

          .device_content {
            width: calc(100% - 16px);
            height: 100%;
            box-sizing: border-box;
            padding-left: 15px;
          }

          .device_item {
            height: 100%;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 10px 20px;
            background: linear-gradient(180deg, rgba(23, 83, 246, 0) 0%, rgba(0, 108, 255, 0.2) 49%, rgba(23, 83, 246, 0) 100%);

            &.device_err {
              background: linear-gradient(180deg, rgba(229, 51, 91, 0) 0%, rgba(229, 51, 91, 0.2) 49%, rgba(229, 51, 91, 0) 100%);

              .device_img {
                border-color: rgba(255, 55, 95, 0.5);
              }
            }

            .device_img {
              width: 88px;
              height: 88px;
              box-sizing: border-box;
              padding: 2px 0;
              background: rgba(2, 9, 30, 0.6);
              border-radius: 6px;
              opacity: 0.6;
              border: 1px solid rgba(17, 184, 240, 0.5);

              img {
                height: 100%;
                display: block;
                margin: 0 auto;
              }
            }

            .device_info {
              width: calc(100% - 88px);
              height: 88px;
              box-sizing: border-box;
              padding-left: 15px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              font-family: DingTalk;
              color: #fff;
              opacity: .6;

              .name {
                font-size: 18px;
              }
            }
          }
        }
      }
    }
  }

  .choose_addr {
    height: 40%;
    background: linear-gradient(180deg, rgba(0, 69, 255, 0.2) 0%, rgba(23, 83, 246, 0) 100%);


    .addr_list {
      height: calc(100% - 50px);

      .first {
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
        padding: 20px 20px;
        font-family: DingTalk;


        .first_info {
          display: flex;
          height: 20px;
          position: relative;
          padding: 10px 0;

          .first_name {
            font-size: 18px;
            color: rgba(255, 255, 255);
            padding-left: 15px;
          }

          .arrow {
            position: absolute;
            right: 0;
            width: 20px;
            height: 20px;
            background-size: 100% 100%;

            &.down {
              background-image: url('../assets/images/arrow_down.png');
            }

            &.up {
              background-image: url('../assets/images/arrow_up.png');
            }
          }
        }

      }

      .second {
        padding: 20px 20px;

        .second_content {
          padding: 10px 20px;
          border: 1px solid rgba(17, 184, 240, 0.5);
          background: rgba(2, 9, 30, 0.6);
        }

        .second_info {
          padding: 10px 0;
          display: flex;
          font-size: 18px;
          color: rgba(255, 255, 255, .6);

          .second_name {
            padding-left: 15px;
          }
        }
      }
    }
  }

  .title_tool {
    height: 50px;
    background-image: url('../assets/images/list_title.png');
    background-size: 100% 100%;

    .title {
      height: 50px;
      line-height: 50px;
      float: left;
      width: 50%;
      font-size: 26px;
      color: #5FEAFF;
      letter-spacing: 4px;
      text-align: center;
      font-family: YouSheBiaoTiHei;
      background: linear-gradient(180deg, #FFFFFF 0%, #80BBFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .btn {
      float: right;
      width: 50%;
      box-sizing: border-box;
      padding-right: 10px;
      padding-top: 15px;
      font-size: 24px;
      color: #5FEAFF;
      letter-spacing: 4px;
      text-align: right;
      font-family: YouSheBiaoTiHei;
      background: linear-gradient(180deg, #FFFFFF 0%, #80BBFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      span {
        margin: 0 10px;
      }
    }
  }

  .circle {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    border: 2px solid rgba(0, 190, 255, .6);

    &.checked:after {
      content: '';
      width: 10px;
      height: 10px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 190, 255, .6);
      border-radius: 10px;
    }
  }
}

.right_box {
  .device_status_list {
    display: flex;
    height: calc(100% - 80px);

    .device_box {
      width: 33.33%;
      box-sizing: border-box;
      padding: 10px;

      .device_top {
        height: 45px;
        background-image: url('../assets/images/device_top.png');
        background-size: 100% 100%;
        margin-bottom: 5px;

        p {
          height: 45px;
          line-height: 45px;
          font-size: 18px;
          color: #5FEAFF;
          letter-spacing: 2px;
          text-align: center;
          font-family: YouSheBiaoTiHei;
          background: linear-gradient(180deg, #FFFFFF 0%, #80BBFF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .device_info {
        height: calc(100% - 50px);
        overflow-y: auto;
        background: linear-gradient(180deg, rgba(0, 69, 255, 0.2) 0%, rgba(23, 83, 246, 0) 100%);
        border: 2px solid;
        border-image: linear-gradient(180deg, rgba(16, 188, 243, 0), rgba(17, 188, 243, 0.1)) 2 2;

        .decoration {
          height: 5px;
        }

        .device_status {
          padding: 20px 10px;
          display: flex;


          .left {
            flex: 1;
            box-sizing: border-box;
            padding: 0 10px;

            .device_img {
              box-sizing: border-box;
              padding-top: 100%;
              background: rgba(2, 9, 30, 0.6);
              border-radius: 6px;
              border: 1px solid rgba(17, 184, 240, 0.5);
              position: relative;
              margin-bottom: 20px;

              img {
                position: absolute;
                display: block;
                height: 100%;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
              }
            }

            .pack_list {
              .pack_item {
                height: 30px;
                line-height: 30px;
                padding: 5px 15px;
                background: linear-gradient(180deg, rgba(1, 12, 44, 0) 0%, rgba(1, 12, 43, 0.6) 100%);
                border-radius: 30px;
                border: 1px solid rgba(17, 184, 240, .5);
                border-top-color: rgba(0, 0, 0, 0);
                margin-bottom: 20px;

                .pack_name {
                  float: left;
                  font-family: DingTalk, DingTalk;
                  color: rgba(255, 255, 255, 0.6);
                  font-size: 14px;

                  .point {
                    width: 10px;
                    height: 10px;
                    position: relative;
                    border-radius: 50%;
                    display: inline-block;
                    border: 1px solid #ccc;
                    margin-right: 10px;
                  }

                  /* 设置动画 */

                  .pointFlicker:before,
                  .pointFlicker:after {
                    content: '';
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-left: -10px;
                    margin-top: -10px;
                    border-radius: 50%;
                    animation: warn 1.5s ease-out 0s infinite;
                  }
                }

                .pack_status {
                  float: right;
                  font-family: DingTalk, DingTalk;
                  color: #00FFFB;
                  font-size: 16px;
                }


                .success {
                  color: rgba(0, 255, 251, 1);

                  &.point {
                    background-color: rgba(0, 255, 251, 1);
                  }

                  /* 设置动画前颜色 */

                  &.pointFlicker:after {
                    background-color: rgba(0, 255, 251, 1);
                  }

                  /* 设置动画后颜色 */

                  &.pointFlicker:before {
                    background-color: rgba(0, 255, 251, .5);
                  }
                }

                .danger {
                  color: rgba(255, 55, 95, 1);

                  &.point {
                    background-color: rgba(255, 55, 95, 1);
                  }

                  /* 设置动画前颜色 */

                  &.pointFlicker:after {
                    background-color: rgba(255, 55, 95, 1);
                  }

                  /* 设置动画后颜色 */

                  &.pointFlicker:before {
                    background-color: rgba(255, 55, 95, .5);
                  }
                }

                .primary {
                  color: rgba(64, 158, 255, 1);

                  &.point {
                    background-color: rgba(64, 158, 255, 1);
                  }

                  /* 设置动画前颜色 */

                  &.pointFlicker:after {
                    background-color: rgba(64, 158, 255, 1);
                  }

                  /* 设置动画后颜色 */

                  &.pointFlicker:before {
                    background-color: rgba(64, 158, 255, .5);
                  }
                }

                .warning {
                  color: rgba(230, 162, 60, 1);

                  &.point {
                    background-color: rgba(230, 162, 60, 1);
                  }

                  /* 设置动画前颜色 */

                  &.pointFlicker:after {
                    background-color: rgba(230, 162, 60, 1);
                  }

                  /* 设置动画后颜色 */

                  &.pointFlicker:before {
                    background-color: rgba(230, 162, 60, .5);
                  }
                }

                .gary {
                  color: rgba(144, 147, 153, 1);

                  &.point {
                    background-color: rgba(144, 147, 153, 1);
                  }

                  /* 设置动画前颜色 */

                  &.pointFlicker:after {
                    background-color: rgba(144, 147, 153, 1);
                  }

                  /* 设置动画后颜色 */

                  &.pointFlicker:before {
                    background-color: rgba(144, 147, 153, .5);
                  }
                }

                @keyframes warn {
                  0% {
                    transform: scale(0.5);
                    opacity: 1;
                  }

                  30% {
                    opacity: 1;
                  }

                  100% {
                    transform: scale(1.4);
                    opacity: 0;
                  }
                }

              }
            }
          }

          .right {
            flex: 1;
            box-sizing: border-box;
            padding: 0 10px;

            .cpu_box {
              box-sizing: border-box;
              padding-top: 100%;
              position: relative;
              margin-bottom: 20px;

              .cpu_list {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                flex-wrap: wrap;

                .cpu_item {
                  width: 50%;
                  height: 50%;
                  position: relative;

                  p {
                    position: absolute;
                    bottom: -5px;
                    width: 100%;
                    text-align: center;
                    font-size: 14px;
                    font-family: DingTalk;
                    color: rgba(255, 255, 255, .6);
                  }

                }
              }
            }

            .cpu_info {
              .cpu_info_item {
                margin-bottom: 20px;

                p {
                  height: 32px;
                  line-height: 32px;
                  padding: 5px;
                  display: flex;

                  .name {
                    font-family: DingTalk, DingTalk;
                    color: rgba(255, 255, 255, 0.6);
                    font-size: 14px;
                    margin-right: 10px;
                  }

                  .num {
                    font-family: DingTalk, DingTalk;
                    color: #00FFFB;
                    font-size: 16px;
                  }

                  i {
                    width: 30px;
                    height: 30px;
                    background-size: 100% 100%;
                    margin-right: 5px;
                  }

                  .cpu {
                    background-image: url(../assets/images/cpu_icon.png);
                  }

                  .io {
                    background-image: url(../assets/images/io_icon.png);
                  }

                  .smart {
                    background-image: url(../assets/images/smart_icon.png);
                  }

                  .lj {
                    background-image: url(../assets/images/lj_icon.png);
                  }

                  .wk {
                    background-image: url(../assets/images/wk_icon.png);
                  }
                }
              }
            }
          }
        }

        .device_version {
          font-family: DingTalk, DingTalk;
          color: #00FFFB;
          font-size: 18px;
          padding: 20px;

          p {
            margin-bottom: 10px;
            text-align: center;
          }
        }
      }
    }
  }

  .page_warp {
    height: 80px;
    background-image: url('../assets/images/page_bg.png');
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;

    .page {
      height: 80px;
      line-height: 80px;
      margin-left: 50%;
      transition: all .5s;
      transform: translateX(-25px);

      .page_num {
        float: left;
        width: 50px;
        font-family: YouSheBiaoTiHei;
        font-size: 24px;
        color: #00BEFF;
        text-align: center;

        &.active {
          color: #FFD60A;
        }
      }
    }
  }
}
</style>